<template>
    <el-form ref="form" label-width="100" :model="model" :rules="rules">
        <el-row :gutter="20">
            <el-col :span="12">
                <el-form-item label="名称" prop="name">
                    <el-input placeholder="请填写名称" v-model="model.name" />
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="标识" prop="label">
                    <el-input placeholder="请填写标识" v-model="model.label" />
                </el-form-item>
            </el-col>
        </el-row>

        <el-row :gutter="20">
            <el-col :span="24">
                <el-form-item label="备注" prop="remark">
                    <el-input placeholder="请填写备注" v-model="model.remark" />
                </el-form-item>
            </el-col>
        </el-row>

        <el-row :gutter="20">
            <el-col :span="24">
                <el-form-item label="权限">
                    <MenuCheck ref="menuCheck" @ok="handleMenuCheckOk" />
                </el-form-item>
            </el-col>
        </el-row>


        <el-row :gutter="20">
            <el-col :span="24">
                <el-form-item>
                    <div style="width:100%; text-align:right">
                        <el-button type="default" @click="handleCancel">取消</el-button>
                        <el-button type="primary" @click="handleConfirm">确认</el-button>
                    </div>
                </el-form-item>
            </el-col>
        </el-row>

    </el-form>
</template>

<script>
import { addRole, updRole } from "@/api/role";
import MenuCheck from "@/components/menu-check/index.vue"

export default {
    components: {
        MenuCheck
    },
    data() {
        return {
            model: {
                // id为0表示新增，否则为编辑
                id: 0,
                name: '',
                label: '',
                remark: '',
                menuIdList: [],
            },
            rules: {
                name: [{ required: true, message: '必填' }],
                label: [{ required: true, message: '必填' }],
            },
        };
    },

    computed: {
        // 是否编辑模式
        isEditMode() {
            return this.model.id !== 0;
        },
    },

    methods: {

        // 处理MenuCheck组件数据获取完成
        handleMenuCheckOk() {
            console.log('menuCheckOk');
            this.$refs.menuCheck.set(this.model.menuIdList);
        },

        setModel(model) {
            // this.model = model;
            Object.assign(this.model, model);
            const arr = [];
            this.model.menuIdList.forEach(item => {
                if (item.id) {
                    arr.push(item.id)
                } else {
                    arr.push(item)
                }
            })
            this.model.menuIdList = arr;
            console.log(this.model, 'arr', arr );
        },
        // 取消事件处理函数
        handleCancel() {
            // 通知父组件取消
            this.$emit('cancel')
        },
        // 确认保存事件处理函数
        async handleConfirm() {
            // 表单校验
            await this.$refs.form.validate();
            // 获取勾选的菜单id集合
            const menuIdList = this.$refs.menuCheck.get();
            // 根据isEditMode来调用不同的接口
            if (this.isEditMode) {
                await updRole({
                    ...this.model,
                    menuIdList,
                });
            } else {
                const { id, ...model } = this.model
                await addRole({
                    ...model,
                    menuIdList,
                })
            }
            // 通知父组件
            this.$emit('success')
        }
    },
    unmounted() {
        console.log('unmounted');
    }
};
</script>